<template>
    <div class="content_base">
        <el-tabs v-model="activeName" @tab-click="tabClick" type="border-card">
          <el-tab-pane label="圩堤完成情况" name="tab1" >
              <el-row :gutter="40">
                <!-- 完成主体工程投资占批复主体工程投资百分比mainPercent -->
                 <el-col :span="18"><div class="grid-content bg-purple charts" >
                    <div  class="chart" id="chart1"></div>
                 </div></el-col>
                 <el-col :span="6"><div class="grid-content bg-purple-light tables">
                   <div class="btn clearfix"><el-button type="primary" plain size="mini" class="iconfont icon-xiazai" @click="downLoad('3')">导出文件</el-button></div>
                   <div class="table" id="table1">
                      <el-table
                        :data="chartData1.tableData"
                        stripe
                        border
                        style="width: 100%"
                        @cell-click="dataDetial('3')"
                        >
                        <el-table-column
                          prop="unit"
                          label="圩堤名称"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="percent"
                          label="百分比">
                        </el-table-column>
                      </el-table>
                   </div>
                   </div>
                 </el-col>
              </el-row>
          </el-tab-pane>
          <el-tab-pane name="tab2" label="县完成情况">
              <el-row :gutter="40">
                 <el-col :span="18"><div class="grid-content bg-purple charts" >
                    <div v-if="nowname==='tab2'" class="chart" id="chart2"></div>
                 </div></el-col>
                 <el-col :span="6">
                   <div class="grid-content bg-purple-light tables">
                     <div class="btn clearfix"><el-button type="primary" plain size="mini" class="iconfont icon-xiazai" @click="downLoad('2')">导出文件</el-button></div>
                   <div class="table" id="table3">
                      <el-table
                        :data="chartData2.tableData"
                        stripe
                        border
                        @cell-click="dataDetial('2')"
                        style="width: 100%">
                        <el-table-column
                          prop='unit'
                          label="县名称"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="percent"
                          label="百分比">
                        </el-table-column>
                      </el-table>
                   </div>
                   </div>
                 </el-col>
              </el-row> 
          </el-tab-pane>
          <el-tab-pane name="tab3" label="市完成情况">
              <el-row :gutter="40">
                 <el-col :span="18"><div class="grid-content bg-purple charts" >
                    <div v-if="nowname==='tab3'" class="chart" id="chart3"></div>
                 </div></el-col>
                 <el-col :span="6"><div class="grid-content bg-purple-light tables">
                   <div class="btn clearfix"><el-button type="primary" plain size="mini" class="iconfont icon-xiazai" @click="downLoad('1')">导出文件</el-button></div>
                   <div class="table" id="table2">
                      <el-table
                        :data="chartData3.tableData"
                        stripe
                        border
                        @cell-click="dataDetial('1')"
                        style="width: 100%">
                        <el-table-column
                          prop="unit"
                          label="市名称"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="percent"
                          label="百分比">
                        </el-table-column>
                      </el-table>
                   </div>
                   </div>
                 </el-col>
              </el-row> 
          </el-tab-pane>
        </el-tabs>
        <el-footer class="footer">Copyright&copy;2018江西省水利科学研究院|江西鄱水信息科技有限公司</el-footer>
    </div>
</template>
<script>
import echarts from  'echarts'
export default {
    data(){
        return{
          nowname:'',
          activeName:'tab1',
          chartData1:{
            unit:[],
            percent:[],
            tableData:[],
          },
          chartData2:{
            unit:[],
            percent:[],
            tableData:[],
          },
          chartData3:{
            unit:[],
            percent:[],
            tableData:[],
          },
        }
    },
    methods:{
        tabClick(value,event){
            this.nowname=value.name
            if(value.name==='tab2'){
               this.getArr(2,this.chartData2)
               }else if(value.name==='tab3'){
                this.getArr(1,this.chartData3)}
        },
      //处理数据
      getArr(code,resultData){
        var _this = this;  
        var result = {} 
        // var table = 'main'
         var thisDate = (new Date()).getTime()
         var chartData =  this.$axios.get(`/projectprocess/getData/main/${code}`,{params:{
             thisDate:thisDate}
          }).then(function(res){
             var codeMes = res.data.responseCode
           if(codeMes=='101'){
                _this.$router.push({name:'login'})
             }else{
               var data = res.data.responseData;
               var unit = []
               var percent = []
               var tableData = []
               // var chartdata = {}
               for(var i=0;i<data.length;i++){
                 unit.push(data[i].unit)
                 percent.push(parseFloat(data[i].percent))
                 i<=10?tableData.push(data[i]):null
               }  
               resultData.unit = unit
               resultData.percent = percent
               resultData.tableData = tableData
               _this.getChart()
              }
           })
  
      },
      //chart挂载
      getChart(){
        var _this = this
        var maxContetn=10
        // this.$axios.get('/projectprocess/getData').then
        this.$nextTick(()=>{
          if(this.nowname==='tab1'){
        //    var percent =this.chartData1.unit.length>maxContetn?(1-(maxContetn/this.chartData1.unit.length))*100:0
        //    var resertWidthV =this.chartData1.unit.length>11? this.chartData1.unit.length*90:1000
           var resertWidthV =this.chartData1.unit.length<7?750:this.chartData1.unit.length*110
           document.getElementById('chart1').style.width = resertWidthV+'px'
            var chart1 = echarts.init(document.getElementById('chart1'));
            chart1.setOption({
              title:{
                text:'圩堤--完成主体工程投资占批复主体工程投资百分比（%）',
                textStyle:{
                    lineHeight:100,
                    fontSize:22
                },
                padding:[20,20,60,100]
                 },
              xAxis: {
                   type: 'category',
                   data: this.chartData1.unit,
                   axisLabel:{
                          interval:0,
                          fontSize:15,
                          formatter:function(value)
                                            {
                                                var ret = "";//拼接加\n返回的类目项
                                                var maxLength = 1;//每项显示文字个数
                                                var valLength = value.length;//X轴类目项的文字个数
                                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                                if (rowN > 1)//如果类目项的文字大于1,
                                                {
                                                    for (var i = 0; i < rowN; i++) {
                                                        var temp = "";//每次截取的字符串
                                                        var start = i * maxLength;//开始截取的位置
                                                        var end = start + maxLength;//结束截取的位置
                                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                                        temp = value.substring(start, end) + "\n";
                                                        ret += temp; //凭借最终的字符串
                                                    }
                                                    return ret;
                                                }else {
                                                    return value;
                                                }
                                            }
                                   }
               },
               yAxis: {
                   type: 'value',
                //    name:'单位（%）',
                //    nameTextStyle:{
                //        fontSize:18,
                //    },
                min: 0,
                max:100,
                   axisLabel:{
                    fontSize:16,
                   }
               },
               grid:{
                   left:80,
                   right:50,
                   bottom:150,
                   top:100
               },
               series: [{
                   data: this.chartData1.percent,
                   type: 'bar',
                   barWidth:60,
                   label: {
                       normal: {
                           position: 'top',
                           show: true,
                           textStyle:{
                               fontSize:16
                           }
                       }
                   },
               }]
            })
        }else if(this.nowname==='tab2'){
             _this.$nextTick(function () {
            //  var resertWidthV =this.chartData2.unit.length>11? this.chartData2.unit.length*100:1000
             var resertWidthV =this.chartData2.unit.length<7?750:this.chartData2.unit.length*110
             document.getElementById('chart2').style.width = resertWidthV+'px'
             var chart2 = echarts.init(document.getElementById('chart2'));
             chart2.setOption({
              title:{
                text:'县级--完成主体工程投资占批复主体工程投资百分比（%）',
                textStyle:{
                    lineHeight:100,
                     fontSize:22
                },
                padding:[20,20,70,100]
                 },
              xAxis: {
                   type: 'category',
                   data: this.chartData2.unit,
                   axisLabel:{
                       interval:0,
                       fontSize:16,
                          formatter:function(value)
                                            {
                                                var ret = "";//拼接加\n返回的类目项
                                                var maxLength = 1;//每项显示文字个数
                                                var valLength = value.length;//X轴类目项的文字个数
                                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                                if (rowN > 1)//如果类目项的文字大于1,
                                                {
                                                    for (var i = 0; i < rowN; i++) {
                                                        var temp = "";//每次截取的字符串
                                                        var start = i * maxLength;//开始截取的位置
                                                        var end = start + maxLength;//结束截取的位置
                                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                                        temp = value.substring(start, end) + "\n";
                                                        ret += temp; //凭借最终的字符串
                                                    }
                                                    return ret;
                                                }else {
                                                    return value;
                                                }
                                            }
                                   }
               },
               yAxis: {
                   type: 'value',
                //    name:'单位（%）',
                //    nameTextStyle:{
                //        fontSize:18,
                //    },
                 min: 0,
                 max:100,
                   axisLabel:{
                    fontSize:16,
                   }
               },
               grid:{
                   left:80,
                   right:50,
                   bottom:150,
                   top:100
               },
               series: [{
                   data: this.chartData2.percent,
                   type: 'bar',
                    barWidth:60,
                   label: {
                       normal: {
                           position: 'top',
                           show: true,
                           textStyle:{
                               fontSize:16
                           }
                       }
                   },
               }]
            });
            })      
        }else{
           this.$nextTick(()=>{
             var resertWidthV =this.chartData3.unit.length<7?750:this.chartData3.unit.length*110
             document.getElementById('chart3').style.width = resertWidthV+'px'
             var chart3 = echarts.init(document.getElementById('chart3'));
             chart3.setOption({
              title:{
                text:'市级--完成主体工程投资占批复主体工程投资百分比（%）',
                textStyle:{
                    lineHeight:100,
                     fontSize:22
                   },
                padding:[20,20,70,100]
                 },
              xAxis: {
                   type: 'category',
                   data: this.chartData3.unit,
                   axisLabel:{
                       interval:0,
                       fontSize:16,
                          formatter:function(value)
                                            {
                                                var ret = "";//拼接加\n返回的类目项
                                                var maxLength = 1;//每项显示文字个数
                                                var valLength = value.length;//X轴类目项的文字个数
                                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                                if (rowN > 1)//如果类目项的文字大于1,
                                                {
                                                    for (var i = 0; i < rowN; i++) {
                                                        var temp = "";//每次截取的字符串
                                                        var start = i * maxLength;//开始截取的位置
                                                        var end = start + maxLength;//结束截取的位置
                                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                                        temp = value.substring(start, end) + "\n";
                                                        ret += temp; //凭借最终的字符串
                                                    }
                                                    return ret;
                                                }else {
                                                    return value;
                                                }
                                            }
                                   }
               },
               yAxis: {
                   type: 'value',
                //    name:'单位（%）',
                //    nameTextStyle:{
                //        fontSize:18,
                //    },
                 min: 0,
                 max:100,
                   axisLabel:{
                    fontSize:16,
                   }
               },
               grid:{
                   left:80,
                   right:50,
                   bottom:150,
                   top:100
               },
               series: [{
                   data: this.chartData3.percent,
                   type: 'bar',
                    barWidth:60,
                   label: {
                       normal: {
                           position: 'top',
                           show: true,
                           textStyle:{
                               fontSize:16
                           }
                       }
                   },
               }]
            });
           })
        }  
        })
             
      },
      //下载文件
      downLoad(code){
        var baseURL = this.$axios.defaults.baseURL
       window.open(`${baseURL}/projectprocess/exportprocesssumexcel/main/${code}`,'_self')
      },
      //点击表格查看详细信息
      dataDetial(code){
        this.$router.push({name:'dataDetial',params:{
          table:'main',
          code:code
        }})
        }
    },
    mounted(){
        //发送请求获得数据
        this.$nextTick(()=>{
            this.getArr(3,this.chartData1)
        })
        
         },
  created(){
      this.nowname=this.activeName   
  }
}
</script>
<style scoped>
.grid-content{
   margin-top:50px;
}
.charts{
  overflow-x: scroll;
  margin-left:10px;
  margin-top:50px;
  background-color: rgba(250, 183, 102,0.2);
}
.chart{
    height:600px;  
    margin:0 auto
}
.table{
  margin-top:10px
}
.el-button{
  float: left;
}
/* canvas{
  width:2000px!important
} */
</style>